<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

        <script type="text/javascript" th:src="@{/jquery-1.12.4/jquery-1.12.4.js}"></script>

        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" th:href="@{/css/font.css}">
        <link rel="stylesheet" th:href="@{/css/xadmin.css}">
        <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>

        <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
        <style>
            .qaz {
                float: left;
            }

        </style>
    </head>

    <body>
    <div class="qwe">
        <div id="main" class="qaz" style="width: 600px;height:400px;border: 1px solid slateblue;margin-top: 2px"></div>
        <div id="main1" class="qaz" style="width: 600px;height:400px;border: 1px solid slateblue;margin-top: 2px"></div>
        <div id="main4" class="qaz" style="width: 600px;height:400px;border: 1px solid slateblue;margin-top: 2px"></div>
        <div id="main2" class="qaz" style="width: 600px;height:400px;border: 1px solid slateblue;margin-top: 2px"></div>
        <div id="main3" class="qaz" style="width: 600px;height:400px;border: 1px solid slateblue;margin-top: 2px"></div>
    </div>

    <script>

    </script>

    <script>
        $.ajax({
            url:"keshihua",
            data: "",
            success(data){
                var boy=data.boy;
                var girl=data.girl;
                var total=boy+girl;
                window.localStorage.setItem("total",total);
                echarts.init(document.getElementById('main')).setOption({
                    title: {
                        text:"用户男女比例显示"
                    },
                    series: {
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        label: {
                            normal: {
                                show: true,
                                formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                            }
                        },
                        data: [
                            {name: '男', value: boy},
                            {name: '女', value: girl},
                            // {name: 'C', value: 13}
                        ]
                    }
                });


            }
        })

        var app1=new Vue({
            el:".qwe",
            data:{
                dizhi:[],
                renshu:[]

            },
            methods:{


            },
            created:function () {
                axios.get("countuserdizhi")
                    .then(function (response) {
                        var d=[];
                        var r=[]
                        for (var i = 0; i <response.data.length ; i++) {
                             d[i]=response.data[i].dizhi;
                             r[i]=response.data[i].renshu;

                        }
                        app1.dizhi=d;
                        app1.renhsu=r;
                        // 绘制图表。
                        var myChart1 = echarts.init(document.getElementById('main1'));
                        option = {
                            title: {
                                text: "用户地区分布",
                            },
                            xAxis: {
                                type: 'category',
                                data: app1.dizhi
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: app1.renhsu,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(220, 220, 220, 0.8)'
                                }
                            }]
                        }
                        // 使用刚指定的配置项和数据显示图表。
                        myChart1.setOption(option);

                        },function (err) {
                            alert("错误")
                        }
                    )



            }

        })

       window.onload=function () {


            axios.get("selectLikejuese?juese="+"编辑")
                .then(function (response) {
                  var   bianji=response.data.length;
                  window.localStorage.setItem("bianji",bianji);


               },function (err) {

               })
           axios.get("selectLikejuese?juese="+"管理")
               .then(function (response) {
                  var guanli=response.data.length;
                   window.localStorage.setItem("guanli",guanli);



               },function (err) {

               })
           axios.get("selectLikejuese?juese="+"宣传")
               .then(function (response) {
                 var  xuanchuang=response.data.length;
                   window.localStorage.setItem("xuanchuang",xuanchuang);


               },function (err) {

               })


           // 绘制图表。
           var myChart = echarts.init(document.getElementById('main4'));
           option = {
               title: {
                   text: '后台职位比列',
                   left: 'center'
               },
               tooltip: {
                   trigger: 'item',
                   formatter: '{a} <br/>{b} : {c} ({d}%)'
               },
               legend: {
                   orient: 'vertical',
                   left: 'left',
                   data: ['管理', '宣传', '编辑']
               },
               series: [
                   {
                       name: '职位',
                       type: 'pie',
                       radius: '55%',
                       center: ['50%', '60%'],
                       data: [
                           {value: window.localStorage.getItem("guanli"), name: '管理'},
                           {value: window.localStorage.getItem("xuanchuang"), name: '宣传'},
                           {value: window.localStorage.getItem("bianji"), name: '编辑'}
                       ],
                       emphasis: {
                           itemStyle: {
                               shadowBlur: 10,
                               shadowOffsetX: 0,
                               shadowColor: 'rgba(0, 0, 0, 0.5)'
                           }
                       }
                   }
               ]
           };

           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);

       }



        // 绘制图表。
        var myChart2 = echarts.init(document.getElementById('main2'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 335, name: '直达', selected: true},
                        {value: 679, name: '营销广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    data: [
                        {value: 335, name: '直达'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1048, name: '百度'},
                        {value: 251, name: '谷歌'},
                        {value: 147, name: '必应'},
                        {value: 102, name: '其他'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option);


        // 绘制图表。
        var myChart3 = echarts.init(document.getElementById('main3'));
        option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option);
    </script>
    </body>
</html>